<template>
  <div v-loading="loading" class="send_message_slack">
    <div class="toText">{{ scriptItem.cascaderLabel }}</div>
    <!-- <el-tooltip :open-delay="1000"  effect="dark" :disabled="Array.isArray(dataForm[this.scriptItem.text][scriptItem.emailFields])&&dataForm[this.scriptItem.text][scriptItem.emailFields].length===0"  placement="left"> -->
      <!-- <div  slot="content"  v-html="tootipHander(dataForm[scriptItem.emailFields])"></div> -->
      <el-cascader v-model="dataForm[scriptItem.text][scriptItem.emailFields]" :options="options" :props="props" class="slack_cascader" :placeholder="scriptItem.cascaderPlaceholder"
        style="width: 400px">
      </el-cascader>
    <!-- </el-tooltip> -->
  </div>
</template>

<script>
export default {
  name: 'TypeSendMessageCascader',
  inject: { botInfo: { default: () => { } } },
  props: {
    dataForm: {
      type: Object,
      default: () => { }
    },
    scriptItem: {
      type: Object,
      default: () => { }
    },
  },
  data () {
    return {
      loading: false,
      props: { 
        multiple: true,
        label:this.scriptItem.cascaderOptionLabel,
        value:this.scriptItem.cascaderOptionValue,
        children:this.scriptItem.cascaderOptionChildren,
      },
      options: []
    }
  },
  created () {
    this.getSlackUserList()
  },
  computed: {
  },
  methods: {
    getSlackUserList () {
      const url = this.scriptItem.cascaderInterfaceUrl
      this.loading = true
      this.$interface.clientReport.getBoardListForBotApi(url)
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.data) {
            this.options = res.data
          }
        }).catch(() => {
          this.loading = false
        })
    },
    tootipHander (arr) {
      if (Array.isArray(arr)) {
        var str = ''
        arr.forEach(i => {
          str += i + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<br>'
        })
        return str
      } else {
        return arr
      }
    },
  }
}
</script>

<style scoped lang='scss'>
.send_message_slack {
  display: flex;
  padding-bottom: 20px;
  gap: 10px;
}

.toText {
  font-size: 14px;
  font-weight: 400;
  color: #404040;
  line-height: 26px;
  margin-top: 6px;
}

::v-deep .el-tag__close.el-icon-close {
  top: 0 !important;
}

::v-deep .el-cascader.slack_cascader .el-input__inner {
  border: none;
}
::v-deep .el-tag {
    height: 30px;
    line-height: 28px;
    background-color: #f0f0f0;
    color: #404040;
    margin: -1px 0 5px 11px;
}
</style>
